<template>
  <view class="container">
    <view v-if="error != ''" style="position: absolute;top: 0;left: 0;">
      {{error == ''? '': errorProgress + error}}
    </view>
    <!-- <image src="../../static/icon/login.png" mode="scaleToFill" class="icon"></image> -->
    <view class="hr"></view>
    <view class="content">
      <text>申请获取以下权限</text>
      <!--  #ifdef  MP-WEIXIN -->
      <text>获得你的公开信息（昵称、头像、地区等）</text>
      <!--  #endif -->
      <!--  #ifdef  MP-ALIPAY -->
      <text>获得你的公开信息（昵称、头像、地区等）</text>
      <!--  #endif -->
    </view>
    <!--  #ifdef  MP-WEIXIN -->
    <button v-if="canUseGetUserProfile" :loading="getUserInfoLoading" :disabled="getUserInfoLoading" @click="getUserInfo">
      授权获取
    </button>
    <button v-else open-type="getUserInfo" @getuserinfo="getUserInfo">微信登录</button>
    <!--  #endif -->

    <!--  #ifdef  MP-ALIPAY -->
    <!--
    <button :loading="getUserInfoLoading"  open-type="getAuthorize" scope="userInfo"
      @getAuthorize="getUserInfo" @onError="onAuthError">
      本地授权获取
    </button>
    -->
    <button  @click="getAliInfo" :loading="getUserInfoLoading" :disabled="getUserInfoLoading">
      授权获取
    </button>    
    <!--  #endif -->
    

  </view>
</template>
<script>
  import {
    mapState,
    mapMutations
  } from "vuex";

  export default {
    data() {
      return {
        code: '',
        getUserInfoLoading: false,
        error:'',
        errorProgress:0
      }
    },
    computed: {
      canUseGetUserProfile(){
        return !!uni.getUserProfile
      }
      // ...mapState(["appId", "stationId", "phoneNumber", "countryCode", "purePhoneNumber", "openId", "unionId",
      //   "userInfo"
      // ]),
      // ...mapState({
      //   appId: state => state.appId,
      //   phoneNumber: state => state.user.phoneNumber,
      //   // countryCode: state => state.user.countryCode,
      //   // purePhoneNumber: state => state.user.purePhoneNumber,
      //   openId: state => state.user.openId,
      //   unionId: state => state.user.unionId,
      //   userInfo: state => state.user.userInfo,
      //   stationId: state => state.station.stationId,
      // }),
    },
    
    async created() {
      if (!!this.userInfo.flag) {
        uni.redirectTo({
          url: "/pages/authen/login"
        })
        return
      }
      
      let [err, loginData] = await uni.login();
      this.code = loginData.code
    },
    methods: {
      ...mapMutations({
        updateUserInfo: "updateUserInfo",
        clearUserInfo: "clearUserInfo"
      }),
      ...mapMutations({
        updateOpenId: "updateOpenId", // 微信
        updateUserId: "updateUserId", //支付宝
        updateUnionId: "updateUnionId",
        updateUserInfo: "updateUserInfo",
        updatePhoneNumber: "updatePhoneNumber",
        updateCountryCode: "updateCountryCode",
        updatePurePhoneNumber: "updatePurePhoneNumber",
        resetApplet: "resetApplet",
        clearUserAuthen:"clearUserAuthen"
      }),
      //#ifdef MP-WEIXIN
      async getUserInfo(res) {
        let userInfo = {}
        try {
          this.getUserInfoLoading = true;
          uni.showLoading({
            title: '获取中...',
            mask: true
          });
          if(this.canUseGetUserProfile){
            const profileData = await wx.getUserProfile({
              lang: "zh_CN",
              desc: "更好的消费推送体验"
            })
            console.log(profileData)
            userInfo = {
              nickName: profileData.userInfo.nickName,
              avatarUrl: profileData.userInfo.avatarUrl,
              gender: profileData.userInfo.gender,
              flag:true
            }
          }else{
            userInfo = {
              nickName: res.detail.userInfo.nickName,
              avatarUrl: res.detail.userInfo.avatarUrl,
              gender: res.detail.userInfo.gender,
              flag:true
            }
          }          
          this.updateUserInfo(userInfo)
          this.getUserInfoLoading = false
          uni.hideLoading();
          const [redirectErr, redirectData] = await uni.redirectTo({
            url: "/pages/authen/login"
          })
        } catch (e) {
          console.log(e)
          this.error = e.message;
          this.errorProgress = (
            wx.getSystemInfoSync().version + '-'// 微信版本
            + wx.getSystemInfoSync().model + '-'  // 设备
            + wx.getSystemInfoSync().system + '-'  // 系统
            + wx.getSystemInfoSync().SDKVersion + '-') // sdk
          this.getUserInfoLoading = false
          uni.hideLoading();
          uni.showToast({
            // title: '请重新授权~',
            title: e.message,
            icon:"error"
          })
          this.clearUserInfo()
        }
      },
      //#endif
    },
  }
</script>
<style lang="scss">
  page {
    width: 750rpx;
    background-color: #f0f2f5;
    min-height: 100vh;

    .container {
      text-align: center;

      .icon {
        margin-top: 414rpx;
        width: 508rpx;
        height: 388rpx;
        margin-top: 180rpx;
        display: inline-block;
      }

      .hr {
        margin-top: 120rpx;
        display: inline-block;
        width: 618rpx;
        height: 2rpx;
        box-sizing: border-box;
        border: 1rpx solid rgba(0, 0, 0, 0.1);
      }

      .content {
        margin-top: 90rpx;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;

        width: 616rpx;

        text:nth-child(1) {
          height: 44rpx;
          font-size: 32rpx;
          color: #000000;
          line-height: 44rpx;
          text-align: left;
        }

        text:nth-child(2) {
          height: 44rpx;
          font-size: 28rpx;
          text-align: left;
          color: rgba(0, 0, 0, 0.25);
          line-height: 44rpx;
        }
      }

      button {
        margin-top: 90rpx;
        display: inline-block;
        width: 616rpx;
        height: 76rpx;
        background: linear-gradient(123deg, #12A273 0%, #12A273 100%);
        border-radius: 38rpx;
        font-size: 32rpx;
        color: #FFFFFF;
        line-height: 76rpx;
      }
    }
  }
</style>
